<template>
	<view class="body" :class="{'no-scroll': isMask}">
		<!-- <view v-if="isMask" class="mask" @click="onMask"></view> -->
		<view class="bg">
			<image :src="$IMAGE_BASE_URL2 + '/yangcan/bg.png'" style="width: 100%; height:671rpx;margin: auto; display: block;"></image>
		</view>
		<view class="tongji top">
			<view class="title">数据统计</view>
			<view class="content">
				<view class="week">
					<view class="qk">周完成情况</view>
					<view class="xq">查看详情></view>
				</view>
			</view>
			<view class="xq2">
				<view class="left">
					<view style="border-radius: 26rpx 0 0 26rpx;" :class="oxSta.weekCount > 0 ? 'active' : ''">
						<image v-if="oxSta.weekCount>0" src='@/img/yangcan/gou.png'
							style="width: 28rpx; height:20rpx;margin: auto; display: block;margin-top: 16rpx;"></image>
					</view>
					<view :class="oxSta.weekCount > 1 ? 'active' : ''">
						<image v-if="oxSta.weekCount>1" src='@/img/yangcan/gou.png'
							style="width: 28rpx; height:20rpx;margin: auto; display: block;margin-top: 16rpx;"></image>
					</view>
					<view style="border-radius:0 26rpx 26rpx 0;" :class="oxSta.weekCount > 2 ? 'active' : ''">
						<image v-if="oxSta.weekCount>2" src='@/img/yangcan/gou.png'
							style="width: 28rpx; height:20rpx;margin: auto; display: block;margin-top: 16rpx;"></image>
					</view>
				</view>
				<view class="right">
					<text style="color: #888888;">{{oxSta.weekCount?oxSta.weekCount:'--'}}</text>
					<text style="color: #fe7610;">/3</text>
					<image src='@/img/yangcan/jiayou.png'
						style="width: 94rpx; height:52rpx;margin: auto; display: block; margin-left: 16rpx;"></image>
				</view>
			</view>
			<view class="zhinan">
				<image src='@/img/yangcan/zhinan.png'
					style="width: 31rpx; height:31rpx;display: block; margin:0 16rpx;"></image>
				氧护指南：每周规律吸氧 3 次以上，能深层焕活身体细胞 。
			</view>
			<view class="xq2">
				<view class="tj">
					<view class="name">吸氧次数</view>
					<view class="num">{{oxSta.weekCount?oxSta.weekCount:'--'}}<text class="name">次</text><u-icon
							name="arrow-downward" color="#fe7610" size="22"></u-icon></view>
				</view>
				<view class="tj">
					<view class="name">吸氧时长</view>
					<view class="num">{{oxSta.weekTime?(oxSta.weekTime/60).toFixed(2):'--'}}<text class="name">小时</text>
					</view>
				</view>
				<view class="tj">
					<view class="name">上周吸氧次数</view>
					<view class="num">{{oxSta.lastWeekCount?oxSta.lastWeekCount:'--'}}<text class="name">次</text></view>
				</view>
			</view>
		</view>
		<view class="situation top">
			<view class="title">月完成情况</view>
			<view style="display: flex; background-color:#fff5ea;border-radius: 15rpx;margin-bottom: 20rpx;">
				<view style="width: 40%;text-align: center;padding: 10rpx;">
					<view class="name">吸氧次数</view>
					<view class="lable">{{oxSta.monthCount?oxSta.monthCount:'--'}}<text class="name">次</text></view>
				</view>
				<view style="width: 60%;text-align: center;padding: 10rpx;">
					<view class="name">吸氧时长</view>
					<view class="lable">{{oxSta.monthTime?Math.floor(oxSta.monthTime / 60):'--'}}<text
							class="name">小时</text>{{oxSta.monthTime?oxSta.monthTime % 60:'--'}}<text
							class="name">分</text></view>
				</view>
			</view>
			<view class="title">年度完成情况</view>
			<view style="display: flex; background-color:#fff5ea;border-radius: 15rpx;margin-bottom: 20rpx;">
				<view style="width: 40%;text-align: center;padding: 10rpx;">
					<view class="name">吸氧次数</view>
					<view class="lable">{{oxSta.yearCount?oxSta.yearCount:'--'}}<text class="name">次</text></view>
				</view>
				<view style="width: 60%;text-align: center;padding: 10rpx;">
					<view class="name">吸氧时长</view>
					<view class="lable">{{oxSta.yearTime?Math.floor(oxSta.yearTime / 60):'--'}}<text
							class="name">小时</text>{{oxSta.yearTime?oxSta.monthTime % 60:'--'}}<text
							class="name">分</text></view>
				</view>
			</view>
			<view class="title">平均值</view>
			<view style="display: flex; background-color:#fff5ea;border-radius: 15rpx;margin-bottom: 20rpx;">
				<view style="width: 40%;text-align: center;padding: 10rpx;">
					<view class="name">平均每周次数</view>
					<view class="lable">{{oxSta.avgWeekCount?oxSta.avgWeekCount:'--'}}<text class="name">次</text></view>
				</view>
				<view style="width: 60%;text-align: center;padding: 10rpx;">
					<view class="name">平均每月次数</view>
					<view class="lable">{{oxSta.avgMonthCount?oxSta.avgMonthCount:'--'}}<text class="name">次</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tongji" style="margin-top: 30rpx;">
			<lechart ref="echarts2"></lechart>
		</view>
	</view>
</template>

<script>
	// 条件编译引入小程序专用代码
	// import lechart from "../chart/index.vue";
	import lechart from "@/pages/chart/components/lime-echart/components/l-echart/l-echart.vue";
	import * as echarts from '../components/echarts.esm.min.js'
	import {
		getYearStatistics
	} from "../../../api/ox.js";
	import {
		getCurrentPage
	} from '@/core/app'
	import StorageUtils from "../../../utils/StorageUtils";
	export default {
		components: {
			lechart,
		},
		data() {
			return {
				oxSta: {
					weekCount: 0
				}, //吸氧统计
			}
		},

		onReady() {
			this.oxSta = getCurrentPage().query;
		},
		onLoad() {
			this.Statistics()
		},
		mounted() {

		},
		methods: {
			async Statistics() {
				await getYearStatistics({}).then(res => {
					console.log(res);
					// this.oxSta=res.obj
					// 配置图表选项
					let option = {
						tooltip: {
							trigger: 'axis',
              confine: true,
              position: function(pt) {
                return [pt[0], '10%'];
              },
							axisPointer: {
								type: 'cross',
								crossStyle: {
									color: '#fff'
								}
							},
							// 自定义提示框内容
							// formatter: (params) => {
							// 	let result = `${params[0].name}<br/>`;
							// 	params.forEach(item => {
							// 		result += `${item.seriesName}: ${item.value} <br/>`;
							// 	});
							// 	return result;
							// }
						},
						legend: {
							data: ['今年', '去年'],
							top: '5%',
							left: 'center'
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: res.obj[0]
						},
						yAxis: {
							type: 'value'
						},
						series: [{
								name: '今年',
								type: 'bar',
								data: res.obj[1],
								color: '#FA9314', // 今年数据颜色
								barWidth: '30%' // 柱宽
							},
							{
								name: '去年',
								type: 'bar',
								data: res.obj[2],
								color: '#FFE520', // 去年数据颜色
								barWidth: '30%'
							}
						]
					};
					this.$refs.echarts2.init(echarts, chart => {
						chart.setOption(option);
					});
				}).catch(error => {
					uni.showToast({
						title: '加载失败',
						icon: 'none',
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	.situation {
		background-color: #ffffff;
		border-radius: 15rpx;
		padding: 30rpx;
		font-weight: bold;

		.title {
			font-size: 24rpx;
			line-height: 50rpx;
		}

		.name {
			font-size: 24rpx;
			color: #848484;
			line-height: 48rpx;
			padding: 0 10rpx;
		}

		.lable {
			font-size: 60rpx;
		}
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.top {
		position: relative;
		z-index: 99;
	}

	.body {
		padding: 28rpx 28rpx 0;
		color: #040303;
		background-color: #f6f2e7;
		overflow: hidden;
	}

	.no-scroll {
		position: fixed;
		width: 100%;
		height: 100vh;
		/* 设置为视口高度 */
		overflow: hidden;
	}

	.mask {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99;
	}

	.tongji {
		border-radius: 20rpx;
		position: relative;
		z-index: 99;
		margin-top: 15rpx;
		background-color: #fffdf9;
		overflow: hidden;
		margin-bottom: 30rpx;
		.week {
			display: flex;
			line-height: 52rpx;
			padding: 0 20rpx;
			margin: 14rpx 0;

			.qk {
				color: #292626;
				font-size: 30rpx;
			}

			.xq {
				background-color: #fdead6;
				font-size: 24rpx;
				color: #fe710e;
				text-align: center;
				width: 150rpx;
				border-radius: 26rpx;
				margin-left: auto;
			}

		}

		.xq2 {
			display: flex;
			margin: 20rpx;

			.tj {
				text-align: center;
				width: 33.3%;
				background-color: #f5f5f7;
				padding: 20rpx;

				.name {
					font-size: 22rpx;
					color: #7b7b7b;
					line-height: 22rpx;
				}

				.num {
					font-size: 60rpx;
					line-height: 80rpx;
				}
			}

			.left {
				width: 75%;
				display: flex;

				view {
					background-color: #efe5da;
					width: 32%;
					margin: auto;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
				}

				.active {
					background-color: #fe7610;
				}
			}

			.right {
				width: 25%;
				padding-left: 20rpx;
				display: flex;
				font-size: 32rpx;
				line-height: 52rpx;
				height: 52rpx;
				font-weight: bold;
			}
		}

		.zhinan {
			display: flex;
			font-size: 20rpx;
			font-weight: bold;
			line-height: 31rpx;
			margin: 20rpx 0;
			color: #7b7b7b;
		}

		.title {
			background: linear-gradient(18deg, #ff8f1b, #ff6400);
			line-height: 80rpx;
			font-weight: bold;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
			border-radius: 20rpx 20rpx 0 0;
		}
	}
</style>